<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05jQuery过滤器3</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 5、子元素过滤器：
            // :only-child       如果某个元素是父元素中唯一的子元素，那将会被匹配；如果父元素中含有其他元素，那将不会被匹配。
            // :first-child      匹配第一个子元素。   ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
            // :last-child       匹配最后一个子元素。 ':last'  只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
            // :nth-child        匹配其父元素下的第N个子或奇偶元素。 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。
            //                   :nth-child从1开始的，而:eq()是从0算起的！
            //                   可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

            // console.log($("ul :first-child"));   // [<li>张三1</li>, <p>222</p>, <li>张三3</li>]
            // console.log($("ul :last-child"));    // [<li>赵六1</li>, <p>222</p>, <li>赵六3</li>]
            // console.log($("ul :only-child"));    // <p>222</p>

            // console.log($("ul :nth-child(1)"));  // [<li>张三1</li>, <p>222</p>, <li>张三3</li>]
            // console.log($("ul :nth-child(2)"));  // [<li>李四1</li>, <li>李四3</li>]
            // console.log($("ul :nth-child(2n)")); // [<li>李四1</li>, <li>赵六1</li>, <li>李四3</li>, <li>赵六3</li>]
            // console.log($("ul :nth-child(even)")); // [<li>李四1</li>, <li>赵六1</li>, <li>李四3</li>, <li>赵六3</li>]
        });
    </script>
</head>
<body>
<div>
    <ul>
        <li>张三1</li>
        <li>李四1</li>
        <li>王五1</li>
        <li>赵六1</li>
    </ul>
    <ul>
        <p>222</p>
    </ul>
    <ul>
        <li>张三3</li>
        <li>李四3</li>
        <li>王五3</li>
        <li>赵六3</li>
    </ul>
</div>
</body>
</html>